<template>
  <div class="layout">
    <div class="left_wrapper">
      <div v-if="showTop" class="top">
        <slot name="top"></slot>
      </div>
      <div class="left" :style="leftHeight">
        <slot name="left"></slot>
      </div>
    </div>
    <div class="right">
      <div class="right_top">
        <setBar></setBar>
      </div>
      <div class="content">
        <slot name="right"> </slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import setBar from '@renderer/components/set-bar.vue'

const props = defineProps({
  showTop: {
    type: Boolean,
    default: true
  }
})

// 计算左侧内容的高度
const leftHeight = computed(() => {
  return props.showTop ? `height: calc(100vh - 50px);` : 'height: 100vh;'
})
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  height: 100vh;
  .left_wrapper {
    width: 200px;
    background-color: #efefef;
    border-right: 1px solid #ccc;
    .left {
      overflow: scroll;
      overflow-x: hidden;
    }
  }
  .right {
    /* height: calc(100vh); */
    flex: 1;
    display: flex;
    flex-direction: column;

    .content {
      flex: 1;
      overflow: scroll;
      overflow-x: hidden;
      /* background-color: red; */
    }
  }
}
</style>
